<template>
    <div>
       <div class="crumbs">
           <el-breadcrumb separator="/">
               <el-breadcrumb-item><i class="el-icon-lx-qrcode"></i> 员工信息</el-breadcrumb-item>
           </el-breadcrumb>
       </div>
       <!--<div class="container">
           <el-table
           :data="tableData"
           border
           :stripe="true"
           style="width: 100%"
           >
               <el-avatar shape="square" :size="50" :src="squareUrl"></el-avatar><el-table-column prop="userName" label="姓名" style="height: 80px" min-width="5%" align="center"></el-table-column>
               <el-table-column prop="tel" label="联系电话" style="height: 80px" min-width="5%" align="center"></el-table-column>
               <el-table-column prop="mark" label="身份" style="height: 80px" min-width="5%" align="center"></el-table-column>
               <el-table-column prop="identityCardNumber" label="身份证号码" style="height: 80px" min-width="5%" align="center"></el-table-column>
           </el-table>
       </div>-->

        <el-card class="box-card" style="width: 35%" shadow="hover">
            <el-avatar shape="square" :size="60" src="https://shadow.elemecdn.com/app/element/hamburger.9cf7b091-55e9-11e9-a976-7f4d0b07eef6.png"></el-avatar>
            <div v-model="tableData" class="text item">
                <el-row>{{'姓名： ' + tableData[0].userName }}</el-row>
                <el-row>{{'联系电话： ' + tableData[0].tel }}</el-row>
                <el-row>{{'身份： ' + tableData[0].mark }}</el-row>
                <el-row>{{'身份证号码： ' + tableData[0].identityCardNumber }}</el-row>
                <el-row>{{'个人邮箱：'+ tableData[0].mail}}</el-row>
            </div>
        </el-card>
    </div>
</template>

<script>
    import { requestStaffInfo } from '../../../api';

    export default {
        name: 'StaffInfo',
        data(){
            return{
                tableData:[],
                tel:"",
                circleUrl: "https://cube.elemecdn.com/3/7c/3ea6beec64369c2642b92c6726f1epng.png",
                squareUrl: "https://cube.elemecdn.com/9/c2/f0ee8a3c7c9638a54940382568c9dpng.png",
            }
        },
        created() {
            console.log(this.$store.state.user.tel)
            this.tel = this.$store.state.user.tel
            this.getStaffInfo();
        },
        methods:{
            async getStaffInfo(){
                console.log(this.tel)
                let json = {tel:this.tel}
                const res = await requestStaffInfo(json)
                console.log(res)
                switch (res.mark) {
                    case(1):
                        res.mark = '管理员'
                        break;
                    case(2):
                        res.mark = '员工'
                        break;
                    case(3):
                        res.mark = '客户'
                        break;
                }
                this.tableData.push(res);
                console.log(this.tableData[0].tel)
            }
        }
    };
</script>

<style scoped>
    .text {
        font-size: 18px;
    }

    .item {
        padding: 18px 0;
    }

    .box-card {
        width: 480px;
    }
</style>